<style>

.el-container {
    height: 100vh;  
    overflow: hidden; /* 隐藏滚动条 */
}
.el-header {
    border-bottom: 1px solid gray;
    background-color: rgb(84,92,100);
}

.el-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-menu-item {
    text-decoration: none;
}

a {
    text-decoration: none;
}

.breadcrumb {
    font-size: 12px;
    color: gray;
}

.userInfo {
    display: flex;
    align-items: center;

}

.img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-right: 10px
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
.el-menu {
    background-color: var(--el-menu-bg-color);
    border-right: none;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: relative;
}
.el-aside {
    /* box-sizing: border-box; */
    border-right-width: 0px;
    flex-shrink: 0;
    overflow: auto;
    width: var(--el-aside-width, 300px);
   background-color: rgb(84,92,100);
}

</style>

<template>
    <el-container>
        <el-header>
            <el-row >
                <el-col :xs="13" :sm="5" :md="4" :lg="4" :xl="2">
                    <div style="color: white;" >医院预约挂号系统</div>
                </el-col>
                <el-col :xs="8" :sm="15" :md="16" :lg="16" :xl="20">
                    <div style="color: white;" class="breadcrumb">{{ breadcrumb }}</div>
                </el-col>
                <el-col :xs="3" :sm="4" :md="4" :lg="4" :xl="2">
                    <div class="userInfo">
                        <div v-if="storedUser.role == 2">
                            <img class="img"
                                src="https://foruda.gitee.com/avatar/1724899953209675858/10720342_zxvahhjad_1724899953.png!avatar30"
                                alt="">
                        </div>
                        <div v-if="storedUser.role == 1">
                            <img class="img"
                                src="https://img2.baidu.com/it/u=1518943175,861072233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
                        </div>

                        <div v-else-if="storedUser.role == 0">
                            <img class="img"
                                src="https://foruda.gitee.com/avatar/1677128075002641106/8332012_long-live_1635996473.png!avatar200"
                                alt="">
                        </div>

                        <el-dropdown :hide-on-click="false" style="color: white;">
                            <span class="el-dropdown-link">
                                {{ storedUser.nickName }}
                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu >
                                    <RouterLink to="/User/Personal">
                                        <el-dropdown-item>个人信息</el-dropdown-item>
                                    </RouterLink>
                                    <RouterLink to="/User/Modify">
                                        <el-dropdown-item>修改密码</el-dropdown-item>
                                    </RouterLink>
                                    <RouterLink to="/login">
                                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                    </RouterLink>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </el-header>

        <el-container>
            <el-aside width="200px"
            >
                <el-scrollbar>
                    <el-menu 
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :default-openeds="['2', '3', '4']">
                        <RouterLink to="/home">
                            <el-menu-item index="1">系统首页</el-menu-item>
                        </RouterLink>

                        <el-sub-menu index="2">
                            <template #title> 预约就诊 </template>
                            <el-menu-item-group>
                                <!-- <div v-if="storedUser.role === '0'"> -->
                                <RouterLink to="/reservation/register">
                                    <el-menu-item index="2-1">预约挂号</el-menu-item>
                                </RouterLink>
                                <!-- </div> -->
                                <RouterLink to="/reservation/record">
                                    <el-menu-item index="2-2">挂号记录</el-menu-item>
                                </RouterLink>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <!-- 只有管理员显示以下菜单 -->
                        <div v-if="storedUser.role === '2'">
                            <el-sub-menu index="3">
                                <template #title> 用户管理 </template>
                                <el-menu-item-group>
                                    <RouterLink to="/usermanage/AdminInfo">
                                        <el-menu-item index="3-1">管理员信息</el-menu-item>
                                    </RouterLink>
                                    <RouterLink to="/usermanage/DoctorInfo">
                                        <el-menu-item index="3-2">医生信息</el-menu-item>
                                    </RouterLink>
                                    <RouterLink to="/usermanage/UserInfo">
                                        <el-menu-item index="3-3">用户信息</el-menu-item>
                                    </RouterLink>
                                </el-menu-item-group>
                            </el-sub-menu>

                            <el-sub-menu index="4">
                                <template #title> 信息管理 </template>
                                <el-menu-item-group>
                                    <RouterLink to="/information/Department">
                                        <el-menu-item index="4-1">科室信息</el-menu-item>
                                    </RouterLink>
                                    <RouterLink to="/information/ArrangeDate">
                                        <el-menu-item index="4-2">医生排班</el-menu-item>
                                    </RouterLink>
                                </el-menu-item-group>
                            </el-sub-menu>
                        </div>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import 'element-plus/theme-chalk/display.css'
import { useRouter } from 'vue-router'

const router = useRouter()

const breadcrumb = ref('首页')

const storedUser = JSON.parse(localStorage.getItem('loggedInUser'))
console.log("PageHome", storedUser)

// 路由名称
const breadcrumbMap = {
    home: '首页',
    register: '预约就诊 > 预约挂号',
    record: '预约就诊 > 挂号记录',
    AdminInfo: '用户管理 > 管理员信息',
    DoctorInfo: '用户管理 > 医生信息',
    UserInfo: '用户管理 > 用户信息',
    Department: '信息管理 > 科室信息',
    ArrangeDate: '信息管理 > 医生排班',
};
// 根据路由更新 breadcrumb
router.beforeEach((to, from, next) => {
    breadcrumb.value = breadcrumbMap[to.name] || '首页';
    next();
});

// 退出登录
function logout() {
    // 清除本地存储空间
    localStorage.removeItem('loggedInUser');
    router.push('/login');
}
</script>